/* 全局重置样式 - 清除所有元素的默认边距和内边距 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 盒模型设置为border-box */
}

/* 基础页面样式 */
body {
    margin: 0 auto; /* 水平居中 */
    font-family: Arial, sans-serif; /* 默认字体 */
    font-size: 14px; /* 基础字体大小 */
    background: #000; /* 黑色背景 */
    color: #333; /* 默认文字颜色 */
    position: relative; /* 相对定位 */
}

/* 图片样式 - 去除边框，设置最大宽度 */
img {
    border: none;
    max-width: 100%;
}

/* 链接样式 */
a {
    cursor: pointer; /* 鼠标指针样式 */
    color: #333; /* 链接颜色 */
    text-decoration: none; /* 去除下划线 */
    outline: none; /* 去除轮廓线 */
}

/* 列表样式 - 去除默认列表样式 */
ul {
    list-style-type: none;
}

/* 强调文本样式 - 去除斜体 */
em {
    font-style: normal;
}

/* 浮动类 - 左浮动和右浮动 */
.lt {
    float: left;
}
.rt {
    float: right;
}

/* 清除浮动 - 清除浮动影响的类 */
.clear {
    clear: both;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* 页面容器 - 设置固定宽度并居中 */
.wrapin {
    width: 1200px;
    margin: 0 auto;
}

/* Logo样式 */
.logo {
    display: block;
    width: 80px;
    margin: 5px 0;
    float: left;
    padding-right: 100px;
}

/* 头部样式 */
header {
    height: 80px; /* 固定高度 */
    padding: 0 15px; /* 左右内边距 */
    background: #0F161F; /* 深色背景 */
}

/* 导航菜单样式 */
.nav {
    float: left; /* 左浮动 */
    line-height: 80px; /* 行高与header高度一致实现垂直居中 */
}
.nav li {
    display: inline-block; /* 行内块元素 */
    width: 80px; /* 固定宽度 */
    font-size: 18px; /* 字体大小 */
    text-align: center; /* 文字居中 */
}
.nav li a {
    color: #fff; /* 白色文字 */
    transition: color 0.3s; /* 颜色过渡效果 */
}
.nav li a:hover {
    color: #e74c3c; /* 悬停时红色 */
}

/* 登录区域样式 */
.denglu {
    float: right; /* 右浮动 */
    color: #fff; /* 白色文字 */
    line-height: 80px; /* 垂直居中 */
}
.denglu a {
    color: #fff; /* 白色文字 */
    font-size: 14px; /* 字体大小 */
    margin: 0 5px; /* 左右外边距 */
    display: inline-block; /* 行内块元素 */
    transition: color 0.3s; /* 颜色过渡效果 */
}
.denglu a:hover {
    color: #e74c3c; /* 悬停时红色 */
}

/* 轮播图区域样式 */
.banner_con {
    margin: 20px 0; /* 上下外边距 */
    position: relative; /* 相对定位 */
}

/* 轮播图主容器 */
.banner_box {
    width: 1200px; /* 固定宽度 */
    height: 410px; /* 固定高度 */
    overflow: hidden; /* 溢出隐藏 */
    position: relative; /* 相对定位 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 阴影效果 */
}

/* 轮播图项样式 */
.box-1 ul {
    display: flex; /* 弹性布局 */
    width: 300%; /* 宽度为3倍(3张图片) */
    height: 100%; /* 高度100% */
    transition: transform 0.5s ease; /* 过渡效果 */
}
.box-1 ul li {
    width: 33.333%; /* 每个项目宽度为1/3 */
    height: 100%; /* 高度100% */
    position: relative; /* 相对定位 */
}
.box-1 ul li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片填充方式 */
}
.box-1 ul li h2 {
    position: absolute; /* 绝对定位 */
    left: 0;
    bottom: 0;
    height: 40px;
    width: 100%;
    background: rgba(125,125,120,.4); /* 半透明背景 */
    text-indent: 2em; /* 首行缩进 */
    padding-right: 500px;
    font-size: 15px;
    line-height: 40px;
    text-overflow: ellipsis; /* 文字溢出显示省略号 */
    overflow: hidden; /* 溢出隐藏 */
    white-space: nowrap; /* 不换行 */
    font-weight: normal;
    color: ghostwhite; /* 文字颜色 */
}

/* 轮播图指示点样式 */
.box-2 {
    position: absolute; /* 绝对定位 */
    bottom: 20px; /* 距离底部20px */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 水平居中 */
    display: flex; /* 弹性布局 */
}
.box-2 ul {
    display: flex; /* 弹性布局 */
}
.box-2 ul li {
    width: 12px; /* 圆点宽度 */
    height: 12px; /* 圆点高度 */
    margin: 0 5px; /* 左右外边距 */
    border-radius: 50%; /* 圆形 */
    background: rgba(255,255,255,0.5); /* 半透明白色 */
    cursor: pointer; /* 手型指针 */
    transition: background 0.3s; /* 背景过渡效果 */
}
.box-2 ul li.on {
    background: #e74c3c; /* 激活状态红色 */
}

/* 轮播图导航按钮 */
.box-3 span {
    position: absolute; /* 绝对定位 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 垂直居中 */
    width: 40px; /* 宽度 */
    height: 40px; /* 高度 */
    background: rgba(0,0,0,0.3); /* 半透明黑色背景 */
    color: white; /* 白色文字 */
    display: flex; /* 弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    border-radius: 50%; /* 圆形 */
    cursor: pointer; /* 手型指针 */
    font-size: 20px; /* 字体大小 */
    transition: background 0.3s; /* 背景过渡效果 */
}
.box-3 span:hover {
    background: rgba(0,0,0,0.6); /* 悬停时背景加深 */
}
.box-3 .prev {
    left: 20px; /* 左侧按钮位置 */
}
.box-3 .next {
    right: 20px; /* 右侧按钮位置 */
}

/* 轮播图右侧区域 */
.banner_rt {
    position: absolute; /* 绝对定位 */
    top: 0;
    right: 0;
    width: 220px; /* 固定宽度 */
    height: 410px; /* 与轮播图同高 */
    background: #0F161F; /* 深色背景 */
    padding: 10px; /* 内边距 */
}
.banner_rt h2 {
    padding-bottom: 5px; /* 底部内边距 */
    color: #fff; /* 白色文字 */
    font-size: 18px; /* 字体大小 */
}
.banner_rt li {
    margin: 8px 0; /* 上下外边距 */
    height: 110px; /* 固定高度 */
    border: 1px solid #ccc; /* 边框 */
    overflow: hidden; /* 溢出隐藏 */
}
.banner_rt img {
    width: 100%;
    height: 100%;
    transition: all 0.3s; /* 过渡效果 */
}
.banner_rt img:hover {
    transform: scale(1.1); /* 悬停时放大 */
}

/* 内容区域 */
.con {
    margin-top: 20px; /* 上外边距 */
    background: #222; /* 深灰色背景 */
    padding: 15px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
}

/* 标题样式 */
.title {
    color: #fff; /* 白色文字 */
    border-bottom: 1px solid #666; /* 底部边框 */
    margin: 15px 0; /* 上下外边距 */
    position: relative; /* 相对定位 */
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    padding-bottom: 10px; /* 底部内边距 */
}
.title h2 {
    font-weight: 600; /* 字体粗细 */
    font-size: 24px; /* 字体大小 */
    border-bottom: none; /* 去除边框 */
}
.title a {
    font-size: 14px; /* 字体大小 */
    color: #ccc; /* 浅灰色文字 */
    transition: color 0.3s; /* 颜色过渡效果 */
}
.title a:hover {
    color: #e74c3c; /* 悬停时红色 */
}

/* 电影院样式 */
.about {
    display: flex; /* 弹性布局 */
    margin-bottom: 20px; /* 下外边距 */
    padding: 20px; /* 内边距 */
    background: #333; /* 深灰色背景 */
    border-radius: 8px; /* 圆角 */
    transition: transform 0.3s, box-shadow 0.3s; /* 过渡效果 */
}
.about:hover {
    transform: translateY(-5px); /* 悬停时上移 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* 悬停时阴影 */
}
.about .text {
    flex: 1; /* 占据剩余空间 */
    padding-right: 20px; /* 右内边距 */
    color: #fff; /* 白色文字 */
}
.about .text p {
    margin-bottom: 20px; /* 下外边距 */
    line-height: 1.6; /* 行高 */
}
.about .pic {
    width: 300px; /* 固定宽度 */
}
.about .pic img {
    width: 100%;
    height: 200px; /* 固定高度 */
    object-fit: cover; /* 图片填充方式 */
    border-radius: 8px; /* 圆角 */
}

/* 按钮样式 */
.btn, .btn2 {
    display: inline-block; /* 行内块元素 */
    padding: 10px 20px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    text-decoration: none; /* 去除下划线 */
    font-weight: bold; /* 加粗 */
    margin-right: 15px; /* 右外边距 */
    transition: all 0.3s; /* 过渡效果 */
}
.btn {
    background: #e74c3c; /* 红色背景 */
    color: white; /* 白色文字 */
}
.btn:hover {
    background: #c0392b; /* 悬停时深红色 */
}
.btn2 {
    background: #3498db; /* 蓝色背景 */
    color: white; /* 白色文字 */
}
.btn2:hover {
    background: #2980b9; /* 悬停时深蓝色 */
}

/* 电影列表样式 */
.game_list {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(5, 1fr); /* 5列等宽 */
    gap: 15px; /* 网格间隙 */
    margin: 15px 0; /* 上下外边距 */
}
.game_list li {
    background: #333; /* 深灰色背景 */
    border-radius: 8px; /* 圆角 */
    overflow: hidden; /* 溢出隐藏 */
    transition: transform 0.3s, box-shadow 0.3s; /* 过渡效果 */
}
.game_list li:hover {
    transform: translateY(-5px); /* 悬停时上移 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* 悬停时阴影 */
}
.game_list .box {
    display: block;
    text-decoration: none; /* 去除下划线 */
}
.game_list .pic {
    height: 200px; /* 固定高度 */
    overflow: hidden; /* 溢出隐藏 */
}
.game_list img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片填充方式 */
    transition: transform 0.5s; /* 过渡效果 */
}
.game_list li:hover img {
    transform: scale(1.05); /* 悬停时放大 */
}
.game_list p {
    padding: 15px; /* 内边距 */
    text-align: center; /* 文字居中 */
    color: #fff; /* 白色文字 */
    font-weight: bold; /* 加粗 */
    margin: 0; /* 去除外边距 */
}

/* 加入购物车按钮 */
.add-to-cart {
    display: block; /* 块级元素 */
    background: #27ae60; /* 绿色背景 */
    color: white; /* 白色文字 */
    text-align: center; /* 文字居中 */
    padding: 10px; /* 内边距 */
    text-decoration: none; /* 去除下划线 */
    font-weight: bold; /* 加粗 */
    transition: background 0.3s; /* 过渡效果 */
    border: none; /* 去除边框 */
    width: 100%; /* 宽度100% */
    cursor: pointer; /* 手型指针 */
}
.add-to-cart:hover {
    background: #219653; /* 悬停时深绿色 */
}

/* 页脚样式 */
footer {
    text-align: center; /* 文字居中 */
    padding: 20px; /* 内边距 */
    background: #0F161F; /* 深色背景 */
    color: #fff; /* 白色文字 */
    margin-top: 30px; /* 上外边距 */
    border-radius: 8px; /* 圆角 */
}

/* 购物车图标 */
.cart-icon {
    position: relative; /* 相对定位 */
    margin-left: 20px; /* 左外边距 */
    cursor: pointer; /* 手型指针 */
    font-size: 24px; /* 字体大小 */
    color: #fff; /* 白色文字 */
    display: inline-block; /* 行内块元素 */
    vertical-align: middle; /* 垂直居中 */
}
.cart-count {
    position: absolute; /* 绝对定位 */
    top: -8px; /* 上偏移 */
    right: -12px; /* 右偏移 */
    background: #e74c3c; /* 红色背景 */
    color: white; /* 白色文字 */
    border-radius: 50%; /* 圆形 */
    width: 20px; /* 宽度 */
    height: 20px; /* 高度 */
    font-size: 12px; /* 字体大小 */
    display: flex; /* 弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 购物车弹窗样式 */
.cart-modal {
    position: fixed; /* 固定定位 */
    top: 0;
    right: -400px; /* 初始隐藏在右侧 */
    width: 380px; /* 固定宽度 */
    height: 100vh; /* 视口高度 */
    background: white; /* 白色背景 */
    box-shadow: -5px 0 15px rgba(0,0,0,0.1); /* 左侧阴影 */
    transition: right 0.4s ease; /* 过渡效果 */
    z-index: 1000; /* 高z-index确保在最上层 */
    overflow-y: auto; /* 垂直滚动 */
    padding: 20px; /* 内边距 */
}
.cart-modal.active {
    right: 0; /* 激活时显示 */
}
.cart-header {
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    padding-bottom: 15px; /* 底部内边距 */
    border-bottom: 1px solid #eee; /* 底部边框 */
    margin-bottom: 20px; /* 下外边距 */
}
.cart-header h3 {
    font-size: 22px; /* 字体大小 */
    color: #333; /* 深灰色文字 */
}
.close-cart {
    background: none; /* 无背景 */
    border: none; /* 无边框 */
    font-size: 24px; /* 字体大小 */
    cursor: pointer; /* 手型指针 */
    color: #999; /* 灰色文字 */
    transition: color 0.3s; /* 颜色过渡效果 */
}
.close-cart:hover {
    color: #e74c3c; /* 悬停时红色 */
}
.cart-items {
    min-height: 300px; /* 最小高度 */
}
.cart-item {
    display: flex; /* 弹性布局 */
    padding: 15px 0; /* 上下内边距 */
    border-bottom: 1px solid #eee; /* 底部边框 */
}
.cart-item img {
    width: 80px; /* 固定宽度 */
    height: 100px; /* 固定高度 */
    object-fit: cover; /* 图片填充方式 */
    border-radius: 4px; /* 圆角 */
    margin-right: 15px; /* 右外边距 */
}
.cart-item-details {
    flex: 1; /* 占据剩余空间 */
}
.cart-item-title {
    font-weight: bold; /* 加粗 */
    margin-bottom: 5px; /* 下外边距 */
}
.cart-item-price {
    color: #e74c3c; /* 红色文字 */
    font-weight: bold; /* 加粗 */
    margin-bottom: 10px; /* 下外边距 */
}
.cart-item-quantity {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
}
.quantity-btn {
    width: 30px; /* 固定宽度 */
    height: 30px; /* 固定高度 */
    background: #f1f1f1; /* 浅灰色背景 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 圆角 */
    cursor: pointer; /* 手型指针 */
    font-size: 16px; /* 字体大小 */
    display: flex; /* 弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
.quantity-input {
    width: 40px; /* 固定宽度 */
    height: 30px; /* 固定高度 */
    text-align: center; /* 文字居中 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 4px; /* 圆角 */
    margin: 0 10px; /* 左右外边距 */
}
.remove-item {
    background: none; /* 无背景 */
    border: none; /* 无边框 */
    color: #e74c3c; /* 红色文字 */
    cursor: pointer; /* 手型指针 */
    margin-top: 10px; /* 上外边距 */
    font-size: 14px; /* 字体大小 */
}
.cart-total {
    padding: 20px 0; /* 上下内边距 */
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    font-size: 18px; /* 字体大小 */
    font-weight: bold; /* 加粗 */
    border-top: 2px solid #eee; /* 顶部边框 */
    margin-top: 20px; /* 上外边距 */
}
.checkout-btn {
    display: block; /* 块级元素 */
    width: 100%; /* 宽度100% */
    padding: 15px; /* 内边距 */
    background: #e74c3c; /* 红色背景 */
    color: white; /* 白色文字 */
    text-align: center; /* 文字居中 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 圆角 */
    font-size: 18px; /* 字体大小 */
    font-weight: bold; /* 加粗 */
    cursor: pointer; /* 手型指针 */
    transition: background 0.3s; /* 过渡效果 */
}
.checkout-btn:hover {
    background: #c0392b; /* 悬停时深红色 */
}
.empty-cart {
    text-align: center; /* 文字居中 */
    padding: 40px 0; /* 上下内边距 */
    color: #999; /* 灰色文字 */
}

/* 遮罩层 */
.overlay {
    position: fixed; /* 固定定位 */
    top: 0;
    left: 0;
    width: 100%; /* 全宽 */
    height: 100%; /* 全高 */
    background: rgba(0,0,0,0.5); /* 半透明黑色背景 */
    z-index: 999; /* 低于购物车弹窗 */
    display: none; /* 默认隐藏 */
}
.overlay.active {
    display: block; /* 激活时显示 */
}